<template>
  <div>
    <el-card>
      <div style="padding: 0 0 20px 0;">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>用户管理</el-breadcrumb-item>
          <el-breadcrumb-item>用户</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <el-form ref="form" :model="query" label-width="80px" :inline="true">
        <el-form-item label="在线状态">
          <el-select v-model="query.online" placeholder="">
            <el-option key="-1" value="-1" label="全部"></el-option>
            <el-option key="1" value="1" label="在线"></el-option>
            <el-option key="0" value="0" label="离线"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态">
          <el-select v-model="query.status" placeholder="审核状态">
            <el-option key="-1" value="" label="全部"></el-option>
            <el-option key="0" value="0" label="待审"></el-option>
            <el-option key="1" value="1" label="通过"></el-option>
            <el-option key="2" value="2" label="拒绝"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input v-model="query.kw" placeholder="设备号/设备id"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSearch()">查询</el-button>
        </el-form-item>
      </el-form>

      <div style="margin-bottom: 20px;">
        <el-tag type="primary">设备总数：{{ devicesnum.num }}</el-tag>
        <el-tag type="warning">分路数：{{ devicesnum.subnum }}</el-tag>
        <el-tag type="success">在线分路：{{devicesnum.onlinesubnum}}</el-tag>
        <el-tag type="danger">在线设备数：{{ devicesnum.onlinenum }}</el-tag>
        <el-tag type="info"
          >离线设备数：{{ devicesnum.num - devicesnum.onlinenum }}</el-tag
        >
        <el-tag type="success"
          >待处理报警分路：{{ devicesnum.alarmnum }}</el-tag
        >
      </div>

      <el-table :data="dataList" border>
        <el-table-column label="编号" prop="id"></el-table-column>
        <el-table-column label="设备名" prop="title"></el-table-column>
        <el-table-column label="设备ID" prop="deviceid"></el-table-column>
        <el-table-column label="项目名称" prop="username"></el-table-column>
        <el-table-column label="设备地点" prop="address"></el-table-column>
        <el-table-column label="在线" prop="is_online">
          <template slot-scope="scope">
            {{ scope.row.is_online == 1 ? '在线' : '离线' }}
          </template>
        </el-table-column>
        <el-table-column label="报警" prop="is_alarm">
          <template slot-scope="scope">
            {{ scope.row.is_online == 1 ? '报警' : '--' }}
          </template>
        </el-table-column>
        <el-table-column label="控制" width="300px" fixed="right">
          <div slot-scope="scope" style="display: flex; flex-wrap: wrap;">
            <el-row :gutter="20" style="margin-bottom: 10px;">
              <el-col :span="6"
                ><el-button
                  type="primary"
                  size="mini"
                  @click="opendevices(scope.row.deviceid, scope.row.is_type)"
                  >全开</el-button
                ></el-col
              >
              <el-col :span="6"
                ><el-button
                  type="danger"
                  size="mini"
                  @click="closedevices(scope.row.deviceid, scope.row.is_type)"
                  >全关</el-button
                ></el-col
              >
              <el-col :span="6">
                <el-button
                  type="warning"
                  size="mini"
                  @click="openSubdevice(scope.row)"
                  >分路</el-button
                ></el-col
              >
              <el-col :span="6"
                ><el-button
                  type="success"
                  size="mini"
                  @click="openFault(scope.row)"
                  >故障</el-button
                ></el-col
              >
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6"
                ><el-button
                  type="primary"
                  size="mini"
                  @click="openDeviceUser(scope.row)"
                  >用户</el-button
                ></el-col
              >
              <el-col :span="6"
                ><el-button
                  type="success"
                  size="mini"
                  @click="openStatistics(scope.row)"
                  >统计</el-button
                ></el-col
              >
              <el-col :span="6"
                ><el-button
                  type="success"
                  size="mini"
                  @click="openEreport(scope.row)"
                  >用电</el-button
                ></el-col
              >
              <el-col :span="6"
                ><el-button
                  type="warning"
                  size="mini"
                  @click="openSubUser(scope.row)"
                  >认领</el-button
                ></el-col
              >
            </el-row>
          </div>
        </el-table-column>
        <el-table-column label="操作" width="220px" fixed="right">
          <div slot-scope="scope">
            <el-button type="primary" size="mini" @click="openEdit(scope.row)"
              >编辑</el-button
            >
            <!--<el-button type="warning" size="mini" @click="resetdevices(scope.row)">出厂</el-button>-->
            <el-button type="danger" size="mini" @click="remove(scope.row)"
              >删除</el-button
            >
            <el-button type="danger" size="mini" @click="resort(scope.row)">排序</el-button>
          </div>
        </el-table-column>
      </el-table>

      <el-pagination
        :total="total"
        :current-page="query.page"
        :page-size="10"
        @current-change="changePage"
      ></el-pagination>
      <div style="height: 20px;"></div>
    </el-card>

    <el-dialog :visible.sync="showSubDevice" title="分路信息" width="90%">
      <subdevice :deviceid="deviceid" :visible="showSubDevice" />
    </el-dialog>

    <el-dialog :visible.sync="showFault" title="设备故障" width="80%">
      <fault :deviceid="device_id" />
    </el-dialog>

    <el-dialog :visible.sync="showDeviceUser" title="设备用户">
      <deviceuser :deviceid="device_id" />
    </el-dialog>

    <el-dialog :visible.sync="showStatistics" title="统计报表" width="80%">
      <statistics :deviceid="deviceid" />
    </el-dialog>

    <el-dialog :visible.sync="showEreport" title="用电报表" width="80%">
      <ereport :deviceid="deviceid" />
    </el-dialog>

    <el-dialog :visible.sync="showSubUser" title="认领" width="80%">
      <subuser :deviceid="deviceid" />
    </el-dialog>

    <el-dialog :visible.sync="showEdit" title="编辑设备">
      <edit :deviceid="deviceid" />
    </el-dialog>
  </div>
</template>

<script>
import { page, remove } from '@/api/equipment/index.js';
import { opendevices,resetdevices,opertioncmd01sort } from '@/api/ws/cmdoper.js';
import subdevice from './components/subdevice.vue';
import fault from './components/fault.vue';
import deviceuser from './components/deviceuser.vue';
import statistics from './components/statistics.vue';
import ereport from './components/ereport.vue';
import subuser from './components/subuser.vue';
import edit from './components/edit.vue';

export default {
  components: {
    subdevice,
    fault,
    deviceuser,
    statistics,
    ereport,
    subuser,
    edit,
  },
  data() {
    return {
      form: {},
      query: {
        page: 1,
        online: '-1',
        status: '',
        kw: '',
      },
      total: 0,
      dataList: [],
      devicesnum: {},

      showSubDevice: false,
      deviceid: '', //这个是设备号
      device_id: '', //这个是主键id
      showFault: false,
      showDeviceUser: false,
      showStatistics: false,
      showEreport: false,
      showSubUser: false,
      showEdit: false,
    };
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      page(this.query).then((res) => {
        console.log(res, 'devices');
        this.dataList = res.data.list.data;
        this.total = res.data.list.total;
        this.devicesnum = res.data.devicesnum;
      });
    },
    changePage(e) {
      this.query.page = e;
      this.getData();
    },
    addSubProject() {
      this.showAddSubProject = true;
    },
    add() {},
    onSearch() {
      this.query.page = 1;
      this.getData();
    },
    //全开
    opendevices(deviceid, is_type) {
      opendevices(deviceid, 'CMD-6', 1, is_type);
    },
    //全关
    closedevices(deviceid, is_type) {
      opendevices(deviceid, 'CMD-6', 0, is_type);
    },
    //分路
    openSubdevice(row) {
      this.deviceid = row.deviceid;
      this.showSubDevice = true;
    },
    //设备故障
    openFault(row) {
      this.device_id = row.id; //查询故障的时候用的是id了
      this.showFault = true;
    },
    openDeviceUser(row) {
      this.device_id = row.id;
      this.showDeviceUser = true;
    },
    openStatistics(row) {
      this.deviceid = row.deviceid;
      this.showStatistics = true;
    },
    //用电报表
    openEreport(row) {
      this.deviceid = row.deviceid;
      this.showEreport = true;
    },
    openSubUser(row) {
      this.deviceid = row.deviceid;
      this.showSubUser = true;
    },
    openEdit(row) {
      this.deviceid = row.deviceid;
      this.showEdit = true;
    },
    remove(row) {
      this.$confirm(
        '您确定要删除设备 ' +
          row.deviceid +
          '，删除设备后会影响到他管理此设备用户',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          remove({ device_id: row.id }).then((res) => {
            console.log(res, '执行成功了吗');
            this.$message.success('删除成功');
            this.getData();
          });
        })
        .catch(() => {});
    },
    resort(row){
      this.$confirm(
        '重新排序会影响已设定定时及参数，是否继续排序?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
           opertioncmd01sort(row.deviceid,'CMD-1',1);
           this.deviceid = '';
           this.$message.success("排序指令发送成功")
        })
        .catch(() => {});
     
    },
    resetdevices(row){
      resetdevices(row.deviceid,'CMD-8',1)
    }
  },
};
</script>

<style scoped></style>
